<!-- HTML5文档头 -->
<!DOCTYPE html>
<!-- lang="zh-cn"，此网页基本是中文内容 -->
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!-- 使用最新的IE兼容模式渲染此网页 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--<link rel="shortcut icon" href=""/>-->
		<!-- 强大的CSS Reset库 -->
		<link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
		<link rel="stylesheet" href="css/core.css"/>
		<script src="vendor/jquery.min.js" ></script>
		<!-- 让IE9以下的浏览器支持HTML5标签 -->
		<!--[if lt IE 9]>
        	<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        
		<script src="vendor/blocksit.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {

				//blocksit define
				//blocksit define
				$(window).load(function() {
					$('#all').BlocksIt({
						numOfCol: 3,						
						blockElement: '.grid'
					});
				});

				//window resize
				var currentWidth = 1250
				$(window).resize(function() {
					var winWidth = $(window).width();
					var conWidth;
					if(winWidth < 800) {
						conWidth = 450;
						col = 1;
					} else if(winWidth < 1024) {
						conWidth = 800;
						col = 2;
					}else if(winWidth < 1200) {
						conWidth = 900;
						col = 2;
					}else if(winWidth < 1250) {
						conWidth = 1250;
						col = 3;
					} 
					
					

					if(conWidth != currentWidth) {
						currentWidth = conWidth;
						$('#all').width(conWidth);
						$('#all').BlocksIt({
							numOfCol: col,
							
						});
					}
				});
			});
		</script>
	</head>
	<body>
		<header class="header">
				<div class="top" id="top">
					<div class="content">		
						<div class="left">
							<div class="all-menu">
								<a href="#"></a>
								<div class="sub-menu">
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Pricing Table</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Our Team</a></li>
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Pricing Table</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Our Team</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Not Found</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Search Results</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Skills</a></li>
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											
										</ul>
									</div>
								</div>
							</div>
							<div class="logo">
								<a href="#">
									<span class="icon"></span>
									<span class="globals"></span>
								</a>
							</div>
						</div>
						<div class="nav">
							<ul>
								<li><a href="index.html">Home</a></li>
								<li class="pages">
									<a href="pages.html">pages</a>
									<ul class="sub-nav">
										<li><a href="about-us.html">About Us</a></li>
										<li><a href="vancancies-details.html">Vacancies</a></li>
										<li><a href="blog-details.html">Blog Details</a></li>
									</ul>
								</li>
								<li  class="pages">
									<a href="portfolio.html">Portfolio</a>
									<ul class="sub-nav">
										<li><a href="masonry-four.html">Masonry Four</a></li>
										<li><a href="masonry-three.html">Masonry Three</a></li>
										<li><a href="grid_three.html">Grid Three</a></li>
										<li><a href="grid-masonry-three.html">Grid Masonry Three</a></li>
										<li><a href="landscape.html">landscape</a></li>
										<li><a href="gallery.html">gallery</a></li>
									</ul>
								</li>
								<li><a href="vacancies.html">Vacancies</a>
								</li>
								<li><a href="blog.html">Blog</a></li>
								<li><a href="cantact.html">Contacts</a></li>
							</ul>
						</div>
						<div class="right">
							<span></span>
							<ul class="sub-nav">
								<li><a href="#">About Us</a></li>
								<li><a href="#">Services</a></li>
								<li><a href="#">Vacancies</a></li>
								<li><a href="#">FAQ</a></li>
								<li><a href="#">Pricing Table</a></li>
								<li><a href="#">Our Team</a></li>	
							</ul>
						</div>
					</div>
					
				</div>
		<!-------移动端导航------->
				<div class="menu-list" id="menu-list">
					<div class="item">
						<ul class="item-menu">
							<li class="home" id="home"></li>
							<li class="more"></li>
							<li class="logo"></li>
						</ul>
						<ul id="sub-menu">
							<li><a href="index.html">Home</a></li>
							<li><a href="pages.html">pages</a></li>
							<li><a href="portfolio.html">Portfolio</a></li>
							<li><a href="vacancies.html">Vacancies</a></li>	
							<li><a href="blog.html">Blog</a></li>
							<li><a href="cantact.html">Contacts</a></li>
						</ul>
					</div>
				</div>
				
				<div class="bottom" id="bottom">
					<div class="inner">
						<div class="left">
							<a href="#">Home</a>
							<span>/</span>
							<a href="#">pages</a>
							<span>/</span>
							<a href="#" class="current">Dropdown Menu Style</a>
						</div>
						<div class="right">
							<div class="message">
								<a href="#">+</a>
								<div class="send">
									<span><i></i>Send a Message</span>
								</div>
							</div>
						</div>
					</div>
				</div>
		</header>
		
		<section class="masonryFour-container">
			<div class="head">
				<div class="content">
					<h2>Portfolio Full Screen Masonry 3 Columns</h2>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh </p>
					<p>euismod tincidunt ut laoreet dolore magna aliquam. </p>
				</div>
			</div>
			<div class="nav">
				<ul>
					<li><a href="#">All Categories</a></li>
					<li><a href="#">Graphic Design</a></li>
					<li><a href="#">Mock-Ups</a></li>
					<li><a href="#">Icons</a></li>
					<li><a href="#">PSD Templates</a></li>
					<li><a href="#">WordPress</a></li>
					<li><a href="#">Miscellaneous</a></li>
				</ul>
			</div>
			
		</section>
		<section class="masonryFour-container" id="masonryFour-grid">
			<div class="all" id="all">
				<div class="grid">
					<img src="img/Categories_1.jpg"/>
					<div class="title">
						<h2>QARO - Multi-Purpose WP Theme</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
					</div>
					<div class="menu">
						<div class="left">
							<a href="#">Portfolio</a>
							<span>/</span>
							<a href="#">Website</a>
							<span>/</span>
							<a href="#">PSD Templates</a>
						</div>
						<div class="right">
							<a href="#"><i></i></a>
						</div>
					</div>
				</div>
				<div class="grid">
					<img src="img/Categories_2.jpg"/>
					<div class="title">
						<h2>QARO - Multi-Purpose WP Theme</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
					</div>
					<div class="menu">
						<div class="left">
							<a href="#">Portfolio</a>
							<span>/</span>
							<a href="#">Website</a>
							<span>/</span>
							<a href="#">PSD Templates</a>
						</div>
						<div class="right">
							<a href="#"><i></i></a>
						</div>
					</div>
				</div>
				<div class="grid">
					<img src="img/Categories_3.jpg"/>
					<div class="title">
						<h2>QARO - Multi-Purpose WP Theme</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
					</div>
					<div class="menu">
						<div class="left">
							<a href="#">Portfolio</a>
							<span>/</span>
							<a href="#">Website</a>
							<span>/</span>
							<a href="#">PSD Templates</a>
						</div>
						<div class="right">
							<a href="#"><i></i></a>
						</div>
					</div>
				</div>
				<div class="grid">
					<img src="img/Categories_4.jpg"/>
					<div class="title">
						<h2>QARO - Multi-Purpose WP Theme</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
					</div>
					<div class="menu">
						<div class="left">
							<a href="#">Portfolio</a>
							<span>/</span>
							<a href="#">Website</a>
							<span>/</span>
							<a href="#">PSD Templates</a>
						</div>
						<div class="right">
							<a href="#"><i></i></a>
						</div>
					</div>
				</div>
				<div class="grid">
					<img src="img/Categories_5.jpg"/>
					<div class="title">
						<h2>QARO - Multi-Purpose WP Theme</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
					</div>
					<div class="menu">
						<div class="left">
							<a href="#">Portfolio</a>
							<span>/</span>
							<a href="#">Website</a>
							<span>/</span>
							<a href="#">PSD Templates</a>
						</div>
						<div class="right">
							<a href="#"><i></i></a>
						</div>
					</div>
				</div>
				<div class="grid">
					<img src="img/Categories_6.jpg"/>
					<div class="title">
						<h2>QARO - Multi-Purpose WP Theme</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
					</div>
					<div class="menu">
						<div class="left">
							<a href="#">Portfolio</a>
							<span>/</span>
							<a href="#">Website</a>
							<span>/</span>
							<a href="#">PSD Templates</a>
						</div>
						<div class="right">
							<a href="#"><i></i></a>
						</div>
					</div>
				</div>
				<div class="grid">
					<img src="img/Categories_1.jpg"/>
					<div class="title">
						<h2>QARO - Multi-Purpose WP Theme</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
					</div>
					<div class="menu">
						<div class="left">
							<a href="#">Portfolio</a>
							<span>/</span>
							<a href="#">Website</a>
							<span>/</span>
							<a href="#">PSD Templates</a>
						</div>
						<div class="right">
							<a href="#"><i></i></a>
						</div>
					</div>
				</div>
				<div class="grid">
					<img src="img/Categories_2.jpg"/>
					<div class="title">
						<h2>QARO - Multi-Purpose WP Theme</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
					</div>
					<div class="menu">
						<div class="left">
							<a href="#">Portfolio</a>
							<span>/</span>
							<a href="#">Website</a>
							<span>/</span>
							<a href="#">PSD Templates</a>
						</div>
						<div class="right">
							<a href="#"><i></i></a>
						</div>
					</div>
				</div>
				<div class="grid">
					<img src="img/Categories_3.jpg"/>
					<div class="title">
						<h2>QARO - Multi-Purpose WP Theme</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
					</div>
					<div class="menu">
						<div class="left">
							<a href="#">Portfolio</a>
							<span>/</span>
							<a href="#">Website</a>
							<span>/</span>
							<a href="#">PSD Templates</a>
						</div>
						<div class="right">
							<a href="#"><i></i></a>
						</div>
					</div>
				</div>
				<div class="grid">
					<img src="img/Categories_4.jpg"/>
					<div class="title">
						<h2>QARO - Multi-Purpose WP Theme</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
					</div>
					<div class="menu">
						<div class="left">
							<a href="#">Portfolio</a>
							<span>/</span>
							<a href="#">Website</a>
							<span>/</span>
							<a href="#">PSD Templates</a>
						</div>
						<div class="right">
							<a href="#"><i></i></a>
						</div>
					</div>
				</div>
				<div class="grid">
					<img src="img/Categories_5.jpg"/>
					<div class="title">
						<h2>QARO - Multi-Purpose WP Theme</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
					</div>
					<div class="menu">
						<div class="left">
							<a href="#">Portfolio</a>
							<span>/</span>
							<a href="#">Website</a>
							<span>/</span>
							<a href="#">PSD Templates</a>
						</div>
						<div class="right">
							<a href="#"><i></i></a>
						</div>
					</div>
				</div>
				<div class="grid">
					<img src="img/Categories_6.jpg"/>
					<div class="title">
						<h2>QARO - Multi-Purpose WP Theme</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
					</div>
					<div class="menu">
						<div class="left">
							<a href="#">Portfolio</a>
							<span>/</span>
							<a href="#">Website</a>
							<span>/</span>
							<a href="#">PSD Templates</a>
						</div>
						<div class="right">
							<a href="#"><i></i></a>
						</div>
					</div>
				</div>
				<div class="grid">
					<img src="img/Categories_1.jpg"/>
					<div class="title">
						<h2>QARO - Multi-Purpose WP Theme</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
					</div>
					<div class="menu">
						<div class="left">
							<a href="#">Portfolio</a>
							<span>/</span>
							<a href="#">Website</a>
							<span>/</span>
							<a href="#">PSD Templates</a>
						</div>
						<div class="right">
							<a href="#"><i></i></a>
						</div>
					</div>
				</div>
				<div class="grid">
					<img src="img/Categories_2.jpg"/>
					<div class="title">
						<h2>QARO - Multi-Purpose WP Theme</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
					</div>
					<div class="menu">
						<div class="left">
							<a href="#">Portfolio</a>
							<span>/</span>
							<a href="#">Website</a>
							<span>/</span>
							<a href="#">PSD Templates</a>
						</div>
						<div class="right">
							<a href="#"><i></i></a>
						</div>
					</div>
				</div>
				<div class="grid">
					<img src="img/Categories_3.jpg"/>
					<div class="title">
						<h2>QARO - Multi-Purpose WP Theme</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
					</div>
					<div class="menu">
						<div class="left">
							<a href="#">Portfolio</a>
							<span>/</span>
							<a href="#">Website</a>
							<span>/</span>
							<a href="#">PSD Templates</a>
						</div>
						<div class="right">
							<a href="#"><i></i></a>
						</div>
					</div>
				</div>
				<div class="grid">
					<img src="img/Categories_4.jpg"/>
					<div class="title">
						<h2>QARO - Multi-Purpose WP Theme</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
					</div>
					<div class="menu">
						<div class="left">
							<a href="#">Portfolio</a>
							<span>/</span>
							<a href="#">Website</a>
							<span>/</span>
							<a href="#">PSD Templates</a>
						</div>
						<div class="right">
							<a href="#"><i></i></a>
						</div>
					</div>
				</div>
				<div class="grid">
					<img src="img/Categories_5.jpg"/>
					<div class="title">
						<h2>QARO - Multi-Purpose WP Theme</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
					</div>
					<div class="menu">
						<div class="left">
							<a href="#">Portfolio</a>
							<span>/</span>
							<a href="#">Website</a>
							<span>/</span>
							<a href="#">PSD Templates</a>
						</div>
						<div class="right">
							<a href="#"><i></i></a>
						</div>
					</div>
				</div>
				<div class="grid">
					<img src="img/Categories_6.jpg"/>
					<div class="title">
						<h2>QARO - Multi-Purpose WP Theme</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
					</div>
					<div class="menu">
						<div class="left">
							<a href="#">Portfolio</a>
							<span>/</span>
							<a href="#">Website</a>
							<span>/</span>
							<a href="#">PSD Templates</a>
						</div>
						<div class="right">
							<a href="#"><i></i></a>
						</div>
					</div>
				</div>
			</div>
			
			<div class="load-more">
				
				<span>Load More</span>
			</div>
		</section>
		<footer class="common-footer-wrapper">
			<div class="common-footer">
				<div class="common-footer-center">
					<div class="center-text">
						<span>Follow Us in Social Networks</span>
						<p>Lorem ipsum dolor sit amet,consectetuer bfjdh dsjfh,sed diam nonummy nibh euismond ut laroreed dolore magna aliquam</p>
					</div>
					
					<ul class="center-menu">
						<li><img src="img/footer1.png"/></li>
						<li><img src="img/footer9.png"/></li>
						<li><img src="img/footer5.png"/></li>
						<li><img src="img/footer2.png"/></li>
						<li><img src="img/footer8.png"/></li>
						<li><img src="img/footer4.png"/></li>
						<li><img src="img/footer3.png"/></li>
						<li><img src="img/footer6.png"/></li>
					</ul>
				</div>
			</div>
			
			<div class="common-footer-bg">
				<div class="bg-text">
					<div class="text-left">
						<span>Twitter Widget</span>
						<div class="left-inner-top">
							<img src="img/footer7.png"/>
							<div class="inner-top-write">
								Mirum est <a href="">@global</a> notare quam littera gothica.qua, nunc putamus parum,antepodse <a href="">http://t.co/6621 J8UFV</a>
								<p>6 MINUTES AGO</p>
							</div>
						</div>
						
						<div class="left-inner-bottom">
							<img src="img/footer7.png"/>
							<div class="inner-bottom-write">
								<a href="">@themefire</a> notare quam littera gothica.qua, nunc putamus parum,antepodse <a href="">http://t.co/6621 J8UFV</a>
								<p>18 JUN 2015</p>
							</div>
						</div>
					</div>
					
					<div class="text-center">
						<span>Dribble Widget</span><br /><br />
						<div class="center-span">claritas est ynew trdhnm euy yebviumgd tyreuin oiywdw gyns ghbnh wikjsdhd</div>
						<ul class="center-img-item">
							<li><img src="img/footer11.jpg" width="139px" height="100px"/></li>
							<li><img src="img/footer13.jpg" width="139px" height="100px"/></li>
							<li class="item-hide"><img src="img/footer12.jpg" width="139px" height="100px"/></li>
							<li><img src="img/footer15.jpg" width="139px" height="100px"/></li>
							<li><img src="img/footer14.jpg" width="139px" height="100px"/></li>
							<li class="item-hide"><img src="img/footer16.jpg" width="139px" height="100px"/></li>
						</ul>
					</div>
					
					<div class="text-right">
						<span>Email Newsletters</span><br /><br />
						<div class="right-write">
							Sign Up our Newsletter to get latest updates and office subscribe to receive news in your inbox
						</div>
						<div class="right-email">
							Email Address
						</div>
						<div class="right-now">
							<a href="">Subscribe Now</a>
						</div>
					</div>
				</div>
			</div>
			
			<div class="common-footer-copyright">
				<div class="copyright-inner">
					<img src="img/footer-copyright.png" class="copyright-img"/>
					<div class="copyright-text">@2015 Design Studio <span>Globals</span> /Designed by <span>ThemeFire</span> / only for <span>Envato Market</span></div>
				</div>
			</div>
		</footer>
		
		
		<script src="js/core.js"></script>
		<script src="js/masonry-four.js"></script>
		
	</body>
</html>
